<template>
	<view class="flex-col " :class="level == 4 ? 'page1' : 'page'">
		<view class="wrap relative">
			<u-swiper :list="banner" height="580" name="img" mode="none"></u-swiper>
		</view>
		<view class="flex-col justify-start section_3">
			<view class="flex-row group justify-between">
				<view @click="toCreate">
					<image class="section_4" :src="sectionList[level].shipinzhizuo" mode="">
					</image>
				</view>
						
				<view @click="toWorks">
					<image class="section_7" :src="sectionList[level].zuopinku" mode=""></image>
				</view>
			</view>
		</view>
		<!-- <image src="https://heigeng.axu9.com/images/jiaocheng-list-bg-hei.png" style="width: 100rpx;height: 200rpx;" mode=""></image> -->
		<view class="flex-col group_5 items-center" v-for="(item,index) in cateList" :key="index">
			<view class="flex-row items-center justify-center " :class="level == 4 ? 'group_77' : 'group_7'">
				<text class="font_4">{{item.title}}</text>
			</view>
			<view class="flex-row horiz-list group_8 justify-between">
				<view @click="toDetail(items)" class="flex-col section_9 items-center justify-center relative" :class="level == 4 ? 'horiz-list-item3' : 'horiz-list-item'"
					v-for="(items,indexs) in item.video" :key="indexs">
					<text class=" font_7 text_9 mt-11-5">{{items.title}}</text>
					<image class="arrow-rg-icon" src="https://heigeng.axu9.com/images/arrow-rg-white.png" mode=""></image>
				</view>
			</view>

		</view>
		<view class="flex-col group_10" :key="index" v-if="anLiVideoList.length > 0">
			<view class="flex-row items-center justify-center group_7">
				<text class="font_4">{{cateTitle}}</text>
			</view>
			<view class="flex-row horiz-list group_9 justify-between">
				<!-- anLiVideoList -->
				<view class="flex-col section_9" :class="level == 4 ? 'horiz-list-item2' : 'horiz-list-item1'"
					v-for="(items,indexs) in anLiVideoList" :key="indexs">
					<view class="flex-col self-stretch relative">
						<video :src="items.video_url" object-fit="fill" style="width: 100%;height: 388rpx;border-radius: 30rpx 30rpx 0 0;"></video>
						<!-- <image :src="items.image" object-fit="fill"
							style="width: 278rpx;height: 388rpx;border-radius: 30rpx 30rpx 0 0;"></image> -->
					</view>
					<view @click="toDetail(items)" class="video-title">
						<text class="self-start font_7 text_9 mt-11-5">{{items.title}}</text>
					</view>
					
				</view>
			</view>
		
		</view>
		<u-tabbar v-model="currentTabbar" :list="list" :height="120" :border-top="true"
			:bg-color="bgColor" active-color="#01F1F3" inactive-color="#fff"></u-tabbar>
	</view>
	
	</view>
</template>

<script>
	import commonData from '@/common/js/data.js';
	import {
		getHome
	} from "@/api/home.js"
	import {
		getUserinfo
	} from "@/api/user.js"
	export default {
		data() {
			return {
				sectionList: [
					{
						shipinzhizuo: 'https://heigeng.axu9.com/images/shipinzhizuo.png',
						zuopinku: 'https://heigeng.axu9.com/images/zuopinku.png'
					},
					{
						shipinzhizuo: 'https://heigeng.axu9.com/images/shipinzhizuo.png',
						zuopinku: 'https://heigeng.axu9.com/images/zuopinku.png'
					},
					{
						shipinzhizuo: 'https://heigeng.axu9.com/images/shipinzhizuo_yin.png',
						zuopinku: 'https://heigeng.axu9.com/images/zuopinku_yin.png'
					},
					{
						shipinzhizuo: 'https://heigeng.axu9.com/images/shipinzhizuo_jin.png',
						zuopinku: 'https://heigeng.axu9.com/images/zuopinku_jin.png'
					},
					{
						shipinzhizuo: 'https://heigeng.axu9.com/images/shipinzhizuo_hei.png',
						zuopinku: 'https://heigeng.axu9.com/images/zuopinku_hei.png'
					}
					
				],
				banner: [], //banner列表
				cateList: [], //分类列表
				cateList1: [
					{
						title: '111111',
						video: [
							{
								title: '哈哈哈哈哈哈哈哈哈啊'
							},
							{
								title: '哈哈哈哈哈哈哈哈哈啊'
							}
						]
					}
				],
				recommandVideoList: [{
						video: "https://shops.cg500.com/static/feilong_hb_video.mp4",
						title: '维尼小熊造型视频',
						isNew: true,
						useNum: '5.6万'
					},
					{
						video: "https://shops.cg500.com/static/feilong_hb_video.mp4",
						title: '维尼小熊造型视频',
						isNew: false,
						useNum: '5.6万'
					},
					{
						video: "https://shops.cg500.com/static/feilong_hb_video.mp4",
						title: '维尼小熊造型视频',
						isNew: false,
						useNum: '5.6万'
					},
					{
						video: "https://shops.cg500.com/static/feilong_hb_video.mp4",
						title: '维尼小熊造型视频',
						isNew: false,
						useNum: '5.6万'
					},
					{
						video: "https://shops.cg500.com/static/feilong_hb_video.mp4",
						title: '维尼小熊造型视频',
						isNew: false,
						useNum: '5.6万'
					},
					{
						video: "https://shops.cg500.com/static/feilong_hb_video.mp4",
						title: '维尼小熊造型视频',
						isNew: false,
						useNum: '5.6万'
					},
					{
						video: "https://shops.cg500.com/static/feilong_hb_video.mp4",
						title: '维尼小熊造型视频',
						isNew: false,
						useNum: '5.6万'
					}
				],
				AIVideoList: [{
						video: "https://shops.cg500.com/static/feilong_hb_video.mp4",
						title: '维尼小熊造型视频',
						isNew: true,
						useNum: '5.6万'
					},
					{
						video: "https://shops.cg500.com/static/feilong_hb_video.mp4",
						title: '维尼小熊造型视频',
						isNew: false,
						useNum: '5.6万'
					},
					{
						video: "https://shops.cg500.com/static/feilong_hb_video.mp4",
						title: '维尼小熊造型视频',
						isNew: false,
						useNum: '5.6万'
					},
					{
						video: "https://shops.cg500.com/static/feilong_hb_video.mp4",
						title: '维尼小熊造型视频',
						isNew: false,
						useNum: '5.6万'
					},
					{
						video: "https://shops.cg500.com/static/feilong_hb_video.mp4",
						title: '维尼小熊造型视频',
						isNew: false,
						useNum: '5.6万'
					},
					{
						video: "https://shops.cg500.com/static/feilong_hb_video.mp4",
						title: '维尼小熊造型视频',
						isNew: false,
						useNum: '5.6万'
					},
					{
						video: "https://shops.cg500.com/static/feilong_hb_video.mp4",
						title: '维尼小熊造型视频',
						isNew: false,
						useNum: '5.6万'
					}
				],
				cateTitle: '',//案例标题
				anLiVideoList: [],//案例视频列表
				top: 62,
				searchValue: '', //搜索关键词
				commonData: {},
				bgColor: 'rgba(0,0,0,0)',
				list: [{
						iconPath: "/static/image/tabbar/home@2x.png",
						selectedIconPath: "/static/image/tabbar/home_selected@2x.png",
						text: '首页',
						customIcon: false,
						pagePath: '/pages/index/index'
					},
					{
						iconPath: "/static/image/tabbar/create@2x.png",
						selectedIconPath: "/static/image/tabbar/create_selected@2x.png",
						text: '创作',
						midButton: false,
						customIcon: false,
						pagePath: '/pages/create/index'
					},
					{
						iconPath: "/static/image/tabbar/mine@2x.png",
						selectedIconPath: "/static/image/tabbar/mine_selected@2x.png",
						text: '我的',
						pagePath: '/pages/mine/index'
					},
				],
				currentTabbar: 0,
				level: 0,//0会员 1VIP 2银钻 3金钻 4黑钻
			}
		},
		async onShow() {
			this.commonData = commonData;
			if(!uni.getStorageSync("userId")){
				uni.hideShareMenu({
				  menus: ['shareAppMessage']
				})
			}else {
				uni.showShareMenu({
				  withShareTicket: true,
				  menus: ['shareAppMessage']
				})
				let res = await getUserinfo({uid: uni.getStorageSync("userId")})
				console.log(res,'res')
				this.level = res.errno == 0 ? res.data.level_id : 0
			}
			
			this.getHomeData()
			
		},
		onShareAppMessage: function (res) {
			let userId = uni.getStorageSync("userId") ? uni.getStorageSync("userId") : ''
			return {  
			      title: '首页', // 分享标题  
			      path: '/pages/index/index?id=' + userId, // 分享路径，可以带参数  
			      success: function (res) {  
			        // 设置成功  
			      },  
			      fail: function (res) {  
			        // 设置失败  
			      }  
			    } 
		},
		onLoad(options){
			console.log(options,'optiosn')
			const scene = decodeURIComponent(options.scene);
			console.log(scene, 'scene')
			if (scene === 'undefined') {
				console.log('111')
				if(JSON.stringify(options) != '{}'){
					console.log('走了么')
					uni.setStorageSync("parentId",options.id)
				}
				// this.getorder(this.user_id);
			} else {
				console.log(scene,'2222');
				uni.setStorageSync("parentId",scene)
				// this.get_device(scene);
				// this.getorder(this.user_id);
			} 
			
			// if(JSON.stringify(options) != '{}'){
			// 	console.log('走了么')
			// 	uni.setStorageSync("parentId",options.id)
			// }
			
		},
		// onShareTimeline(){},
		methods: {
			// 跳转到视频详情
			toDetail(item) {
				console.log(item)
				uni.navigateTo({
					url: '/pagesHome/videoDetail/index?url=' + item.video_url
				})
			},
			// 获取首页数据
			getHomeData() {
				getHome().then(res => {
					var arr = res.data.banner
					// 创建一个空对象用于存储筛选结果
					const filteredResults = {};
					// 获取所有不同的 title 值
					const titles = [...new Set(arr.map(item => item.title))];
					// 遍历所有不同的 title 值，并进行筛选
					titles.forEach(title => {
					  filteredResults[title] = arr.filter(item => item.title === title);
					});
					console.log(filteredResults,'filteredResults')
					// this.banner = res.data.banner;
					this.banner = (this.level == 0 || this.level == 1) ? filteredResults['VIP'] : this.level == 2 ? filteredResults['银钻'] : this.level == 3 ? filteredResults['金钻'] : this.level == 4 ? filteredResults['黑钻'] : filteredResults['VIP']
					this.cateList = res.data.cate;
					this.cateTitle = res.data.video_cate.title;
					this.anLiVideoList = res.data.video;
					// this.anLiVideoList = res.data.cate[0].video;
				}).catch(err => {
					console.log(err, '错误')
				})
			},
			// 跳转到视频创作
			toCreate() {
				uni.switchTab({
					url: '/pages/create/index'
				})
			},
			// 跳转到对标案例
			toAnli() {
				uni.showToast({
					title: '开发中',
					icon: 'none'
				})
			},
			// 跳转到矩阵发布
			toPublish() {
				// uni.showToast({
				// 	title: '开发中',
				// 	icon: 'none'
				// })
			},
			// 跳转到我的作品库
			toWorks() {
				if(!uni.getStorageSync("userId")){
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					setTimeout(()=>{
						uni.switchTab({
							url: '/pages/mine/index'
						})
					},1000)
					
					return
				}
				uni.navigateTo({
					url: '/pagesMine/worksLibrary/index'
				})
			}
		}
	}
</script>

<style>
	@import url(../../static/css/common.css);
	
	.mt-11-5 {
		margin-top: 23rpx;
	}
	
	page {
		background-color: #f7f8fa;
		/* background-color: #fff9ed; */
	}
	
</style>
<style lang="less" scoped>

	/deep/.u-tabbar__content {
		padding-bottom: 20rpx !important;
	}
</style>
<style lang="scss" scoped>
	
	.page {

		height: 100%;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		padding-bottom: 100rpx;
		background-image: url('https://heigeng.axu9.com/images/home-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.page1 {
	
		height: 100%;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		padding-bottom: 100rpx;
		background-color: #000103;
	}



	.section_3 {
		// padding: 40rpx 0;
		// background-image: linear-gradient(0deg, $index-icon-bg-color-left 0%, $index-icon-bg-color-right 100%);
	}

	.group {
		padding: 34rpx 50rpx 61rpx 50rpx;
	}

	.section_4 {
		// width: 330rpx;
		// height: 230rpx;
		width: 310rpx;
		height: 205rpx;
		// margin-bottom: 20rpx;
	}

	.section_8 {
		height: 138rpx;
		width: 330rpx;
	}


	.section_7 {
		// height: 229rpx;
		// width: 330rpx;
		height: 205rpx;
		width: 310rpx;
	}



	.section_5 {
		width: 330rpx;
		height: 141rpx;
		margin-bottom: 20rpx;
	}



	.group_5 {
		// padding-left: 29rpx;
		// padding-top: 6rpx;
	}

	.group_6 {
		padding: 0 5rpx;
	}

	.group_7 {
		// height: 40rpx;
		width: 660rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-image: url('https://heigeng.axu9.com/images/jiaocheng-tit-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.group_77 {
		// height: 40rpx;
		width: 660rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-image: url('https://heigeng.axu9.com/images/jiaocheng-tit-bg-hei.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.font_4 {
		font-family: PingFang SC;
		line-height: 29rpx;
		font-weight: 600;
		font-size: 40rpx;
		text-align: center;
		color: #FFFFFF;
		letter-spacing: 24rpx;
	}

	.image_12 {
		width: 87rpx;
		height: 22rpx;
	}

	.image_13 {
		margin-left: 9rpx;
		margin-top: -11rpx;
	}

	.image_10 {
		width: 11rpx;
		height: 20rpx;
	}

	.image_11 {
		margin-right: 28rpx;
	}

	.horiz-list {
		margin-top: 33rpx;
	}

	.group_8 {
		// overflow-x: scroll;
		width: 100%;
		padding: 0 44rpx;
		padding-bottom: 30rpx;
		flex-wrap: wrap;
	}
	.group_9 {
		flex-wrap: wrap;
	}
	.group_10 {
		padding-left: 29rpx;
		padding-top: 6rpx;
		padding-right: 29rpx;
	}
	.horiz-list-item1 {
		
		background-image: url('https://heigeng.axu9.com/images/jiaocheng-list-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		border-radius: 24rpx;
		width: 47%;
		margin-bottom: 30rpx;
		/* margin-right: 20rpx; */
	}
	.horiz-list-item2 {
		
		background-image: url('https://heigeng.axu9.com/images/jiaocheng-list-bg-hei.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		border-radius: 24rpx;
		width: 47%;
		margin-bottom: 30rpx;
		/* margin-right: 20rpx; */
	}
	.arrow-rg-icon {
		width: 12rpx;
		height: 23rpx;
		position: absolute;
		right: 69rpx;
		bottom: 31rpx;
	}

	.section_9 {
		flex-shrink: 0;
		
	}
	.video-title {
		height: 100%;
		padding-bottom: 36rpx;
	}

	.horiz-list-item {
		padding-bottom: 36rpx;
		// background-color: #ffffff;
		border-radius: 24rpx;
		width: 278rpx;
		// margin-right: 20rpx;
		// width: 320rpx;
		width: 49%;
		height: 193rpx;
		background-image: url('https://heigeng.axu9.com/images/jiaocheng-list-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin-bottom: 20rpx;
		padding: 0 50rpx;
	}
	.horiz-list-item3 {
		padding-bottom: 36rpx;
		// background-color: #ffffff;
		border-radius: 24rpx;
		width: 278rpx;
		// margin-right: 20rpx;
		// width: 320rpx;
		width: 49%;
		height: 193rpx;
		background-image: url('https://heigeng.axu9.com/images/jiaocheng-list-bg-hei.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin-bottom: 20rpx;
		padding: 0 50rpx;
	}


	.font_7 {
		 color: #ffffff;
		 font-size: 32rpx;
		 text-align: center;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		/* 限制在一个块元素显示的文本的行数 */
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.text_9 {
		margin-left: 17rpx;
	}
</style>